<script setup lang="ts">
import {addNotifyListenerH5, jsApiCall, pushWindow, removeNotifyListenerH5} from '../../utils/alipayUtil.ts';
import {ref} from "vue";

let isPressed = ref(false)
let errorMsg = ref('')

function openPopoverWin() {
  pushWindow("/content")
}

function openAbout() {
  pushWindow("/about")
}

function getLocation() {
  jsApiCall("get_app_version", {}, (result: any) => {
    errorMsg.value = JSON.stringify(result);
  })
}

function takePhone() {
  AlipayJSBridge.call('choose_image_video', {
    choose_type: 1
  }, (result: any) => {
    errorMsg.value = JSON.stringify(result);
  })
}

/**
 * FIXME 合规需要：开始前必须先申请麦克风权限
 * NEBULANOTIFY_EVENT_SPEECH_TRANSCRIBER_PARTIAL  语音半识别文字
 * NEBULANOTIFY_EVENT_SPEECH_TRANSCRIBER_SENTENCE 语音整句识别文字
 * NEBULANOTIFY_EVENT_SPEECH_TRANSCRIBER_RMS 语音声音能量大小
 */
//语音开始
function speechStart() {
  isPressed.value = true
  addNotifyListenerH5("EVENT_SPEECH_TRANSCRIBER_SENTENCE", (result: any) => {
    errorMsg.value = JSON.stringify(result);
  })
  AlipayJSBridge.call("cclx_speech_transcriber", {
    event: 'start'
  }, (result: any) => {
    errorMsg.value = JSON.stringify(result);
  })
}

//语音结束
function speechEnd() {
  isPressed.value = false
  removeNotifyListenerH5("EVENT_SPEECH_TRANSCRIBER_SENTENCE")
  AlipayJSBridge.call("cclx_speech_transcriber", {
    event: 'end'
  }, (result: any) => {
    errorMsg.value = JSON.stringify(result);
  })
}

</script>

<template>
  <div class="main-container">
    <div class="main-group">
      <div class="main-group-title">已上线</div>
      <div class="main-group-child">
        <button @click="openPopoverWin" class="button-default">打开原生页面</button>
        <button @click="openAbout" class="button-default">打开关于我</button>
        <button @click="getLocation" class="button-default">获取定位信息</button>
        <button @click="takePhone" class="button-default">拍照</button>
      </div>
    </div>

    <div class="main-group">
      <div class="main-group-title">测试中</div>
      <div class="main-group-child">
        <button @mousedown="speechStart" @mouseup="speechEnd" @touchstart="speechStart" @touchend="speechEnd"
                class="button-speech">
          {{ isPressed ? '松开结束' : '按住说话' }}
        </button>
      </div>
    </div>

    <div class="error-child">{{ errorMsg }}</div>

  </div>
</template>

<style scoped>
button {
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: #1a1a1a;
}

button:active {
  background-color: #f3bd00 !important;
  outline: none !important;;
}

.main-container {
  display: flex;
  height: 100vh;
  padding: 16px;
  background-color: #F5F5F5;
  flex-direction: column;
}

.main-group {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.main-group-title {
  display: flex;
  font-weight: bold;
  font-size: 18px;
  color: #e8ab00;
}

.main-group-child {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.button-default {
  background-color: transparent;
  margin-right: 8px;
  margin-top: 8px;
  border: #EAEAEA 1px solid;
  user-select: none;
  outline: none;
  appearance: none;
}

.button-speech {
  background-color: transparent;
  margin-right: 8px;
  margin-top: 8px;
  border: #e8ab00 1px solid;
  width: 100%;
}

.error-child {
  margin-right: 8px;
}
</style>
